<template>
  <n-form :model="styles.customTheme">
    <n-collapse>
      <n-collapse-item title="颜色" name="color">
        <n-flex>
          <n-form-item
            v-for="item in themeColor"
            :label="item.label"
            :key="item.key"
          >
            <n-color-picker
              v-model:value="styles.customTheme.common![item.key]"
            />
          </n-form-item>
        </n-flex>
      </n-collapse-item>
      <n-collapse-item title="字体" name="font">
        <n-flex>
          <n-form-item
            v-for="item in fonts"
            :label="item.label"
            :key="item.key"
          >
            <n-input v-model:value="styles.customTheme.common![item.key]" />
          </n-form-item>
        </n-flex>
      </n-collapse-item>
      <n-collapse-item title="其他" name="font">
        <n-flex>
          <n-form-item
            v-for="item in others"
            :label="item.label"
            :key="item.key"
          >
            <n-input v-model:value="styles.customTheme.common![item.key]" />
          </n-form-item>
        </n-flex>
      </n-collapse-item>
    </n-collapse>
  </n-form>
</template>

<script setup lang="ts">
import styleStore from "~/stores/style";
import {
  NCollapse,
  NCollapseItem,
  NForm,
  NFormItem,
  NColorPicker,
  NFlex,
  NInput,
} from "naive-ui";
import type { ThemeCommonVars } from "naive-ui";

const styles = styleStore();
function dateNow() {
  return Date.now().toString();
}
// 颜色类型对象
interface ThemeItem {
  key: keyof ThemeCommonVars;
  label: string;
}
const themeColor: ThemeItem[] = [
  {
    key: "baseColor",
    label: "基础颜色",
  },
  {
    key: "primaryColor",
    label: "主颜色",
  },
  {
    key: "primaryColorHover",
    label: "主颜色悬停",
  },
  {
    key: "primaryColorPressed",
    label: "主颜色按下",
  },
  {
    key: "primaryColorSuppl",
    label: "主颜色补充",
  },
  {
    key: "infoColor",
    label: "信息颜色",
  },
  {
    key: "infoColorHover",
    label: "信息颜色悬停",
  },
  {
    key: "infoColorPressed",
    label: "信息颜色按下",
  },
  {
    key: "infoColorSuppl",
    label: "信息颜色补充",
  },
  {
    key: "successColor",
    label: "成功颜色",
  },
  {
    key: "successColorHover",
    label: "成功颜色悬停",
  },
  {
    key: "successColorPressed",
    label: "成功颜色按下",
  },
  {
    key: "successColorSuppl",
    label: "成功颜色补充",
  },
  {
    key: "warningColor",
    label: "警告颜色",
  },
  {
    key: "warningColorHover",
    label: "警告颜色悬停",
  },
  {
    key: "warningColorPressed",
    label: "警告颜色按下",
  },
  {
    key: "warningColorSuppl",
    label: "警告颜色补充",
  },
  {
    key: "errorColor",
    label: "错误颜色",
  },
  {
    key: "errorColorHover",
    label: "错误颜色悬停",
  },
  {
    key: "errorColorPressed",
    label: "错误颜色按下",
  },
  {
    key: "errorColorSuppl",
    label: "错误颜色补充",
  },
  {
    key: "textColorBase",
    label: "文本基础颜色",
  },
  {
    key: "textColor1",
    label: "文本颜色1",
  },
  {
    key: "textColor2",
    label: "文本颜色2",
  },
  {
    key: "textColor3",
    label: "文本颜色3",
  },
  {
    key: "textColorDisabled",
    label: "文本禁用颜色",
  },
  {
    key: "placeholderColor",
    label: "占位符颜色",
  },
  {
    key: "placeholderColorDisabled",
    label: "占位符禁用颜色",
  },
  {
    key: "iconColor",
    label: "图标颜色",
  },
  {
    key: "iconColorDisabled",
    label: "图标禁用颜色",
  },
  {
    key: "iconColorHover",
    label: "图标悬停颜色",
  },
  {
    key: "iconColorPressed",
    label: "图标按下颜色",
  },
  {
    key: "dividerColor",
    label: "分隔线颜色",
  },
  {
    key: "borderColor",
    label: "边框颜色",
  },
  {
    key: "closeIconColorHover",
    label: "关闭图标悬停颜色",
  },
  {
    key: "closeIconColor",
    label: "关闭图标颜色",
  },
  {
    key: "closeIconColorPressed",
    label: "关闭图标按下颜色",
  },
  {
    key: "closeColorHover",
    label: "关闭悬停颜色",
  },
  {
    key: "closeColorPressed",
    label: "关闭按下颜色",
  },
  {
    key: "clearColor",
    label: "清除颜色",
  },
  {
    key: "clearColorHover",
    label: "清除悬停颜色",
  },
  {
    key: "clearColorPressed",
    label: "清除按下颜色",
  },
  {
    key: "scrollbarColor",
    label: "滚动条颜色",
  },
  {
    key: "scrollbarColorHover",
    label: "滚动条悬停颜色",
  },
  {
    key: "progressRailColor",
    label: "进度条轨道颜色",
  },
  {
    key: "railColor",
    label: "轨道颜色",
  },
  {
    key: "popoverColor",
    label: "弹出框颜色",
  },
  {
    key: "tableColor",
    label: "表格颜色",
  },
  {
    key: "cardColor",
    label: "卡片颜色",
  },
  {
    key: "modalColor",
    label: "模态框颜色",
  },
  {
    key: "bodyColor",
    label: "主体颜色",
  },
  {
    key: "tagColor",
    label: "标签颜色",
  },
  {
    key: "avatarColor",
    label: "头像颜色",
  },
  {
    key: "invertedColor",
    label: "反转颜色",
  },
  {
    key: "inputColor",
    label: "输入框颜色",
  },
  {
    key: "codeColor",
    label: "代码颜色",
  },
  {
    key: "tabColor",
    label: "标签页颜色",
  },
  {
    key: "actionColor",
    label: "操作颜色",
  },
  {
    key: "tableHeaderColor",
    label: "表格头部颜色",
  },
  {
    key: "hoverColor",
    label: "悬停颜色",
  },
  {
    key: "tableColorHover",
    label: "表格悬停颜色",
  },
  {
    key: "tableColorStriped",
    label: "表格条纹颜色",
  },
  {
    key: "pressedColor",
    label: "按下颜色",
  },
  {
    key: "inputColorDisabled",
    label: "输入框禁用颜色",
  },
  {
    key: "buttonColor2",
    label: "按钮颜色2",
  },
  {
    key: "buttonColor2Hover",
    label: "按钮悬停颜色2",
  },
  {
    key: "buttonColor2Pressed",
    label: "按钮按下颜色2",
  },
];
const fonts: ThemeItem[] = [
  {
    key: "fontFamily",
    label: "字体",
  },
  {
    key: "fontFamilyMono",
    label: "等宽字体",
  },
  {
    key: "fontWeight",
    label: "字体粗细",
  },
  {
    key: "fontWeightStrong",
    label: "粗体字体粗细",
  },
  {
    key: "fontSize",
    label: "字体大小",
  },
  {
    key: "fontSizeMini",
    label: "迷你字体大小",
  },
  {
    key: "fontSizeTiny",
    label: "微小字体大小",
  },
  {
    key: "fontSizeSmall",
    label: "小字体大小",
  },
  {
    key: "fontSizeMedium",
    label: "中字体大小",
  },
  {
    key: "fontSizeLarge",
    label: "大字体大小",
  },
  {
    key: "fontSizeHuge",
    label: "超大字体大小",
  },
  {
    key: "lineHeight",
    label: "行高",
  },
];

const others: ThemeItem[] = [
  {
    key: "boxShadow1",
    label: "阴影1",
  },
  {
    key: "boxShadow2",
    label: "阴影2",
  },
  {
    key: "boxShadow3",
    label: "阴影3",
  },
  {
    key: "opacity1",
    label: "不透明度1",
  },
  {
    key: "opacity2",
    label: "不透明度2",
  },
  {
    key: "opacity3",
    label: "不透明度3",
  },
  {
    key: "opacity4",
    label: "不透明度4",
  },
  {
    key: "opacity5",
    label: "不透明度5",
  },
  {
    key: "opacityDisabled",
    label: "禁用不透明度",
  },
  {
    key: "scrollbarWidth",
    label: "滚动条宽度",
  },
  {
    key: "scrollbarHeight",
    label: "滚动条高度",
  },
  {
    key: "scrollbarBorderRadius",
    label: "滚动条边框半径",
  },
  {
    key: "cubicBezierEaseInOut",
    label: "缓动函数1",
  },
  {
    key: "cubicBezierEaseOut",
    label: "缓动函数2",
  },
  {
    key: "cubicBezierEaseIn",
    label: "缓动函数3",
  },
  {
    key: "borderRadius",
    label: "边框半径",
  },
  {
    key: "borderRadiusSmall",
    label: "小边框半径",
  },

  {
    key: "heightMini",
    label: "迷你高度",
  },
  {
    key: "heightTiny",
    label: "微小高度",
  },
  {
    key: "heightSmall",
    label: "小高度",
  },
  {
    key: "heightMedium",
    label: "中高度",
  },
  {
    key: "heightLarge",
    label: "大高度",
  },
  {
    key: "heightHuge",
    label: "超大高度",
  },
];
// 监听自定义主题变化
watch(
  () => styles.customTheme,
  () => {
    styles.theme = { ...styles.customTheme, name: `custom-${dateNow()}` };
  },
  {
    deep: true,
  }
);
</script>

<style lang="scss" scoped>
.n-color-picker {
  min-width: 200px;
}
</style>
